<template>
  <div class="cen">
    <el-skeleton style="--el-skeleton-circle-size: 100px">
      <template #template>
        <div class="ac">
          <el-avatar shape="square">tou</el-avatar>
          <span class="name">{{uname}}</span>
        </div>

        <div class="data">
          <el-descriptions
            title="基本信息"
            :column="10"
            size="large"
            direction="vertical"
          >
            <el-descriptions-item label="账号名称" :span="24"
              >44444@qq.com
               <el-button type="primary"
                >点击修改</el-button
              ></el-descriptions-item
            >

            <el-descriptions-item label="登录密码" :span="24"
              >已设置
              <el-button type="primary"
                >点击修改</el-button
              ></el-descriptions-item
            >

            <el-descriptions-item :span="24">
              <el-button type="danger">退出登录</el-button>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
    </el-skeleton>
    <div class="time">
      <el-timeline>
        <el-timeline-item timestamp="2022-05-10" placement="top">
          <el-card class="timeCard">
            <h4>登录时间:2022-05-10</h4>
            <h4>登录地点:株洲</h4>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2022-05-10" placement="top">
          <el-card class="timeCard">
            <h4>登录时间:2022-05-10</h4>
            <h4>登录地点:株洲</h4>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2022-05-10" placement="top">
          <el-card class="timeCard">
            <h4>登录时间:2022-05-10</h4>
            <h4>登录地点:株洲</h4>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script setup>
import { ref,reactive } from 'vue';

let uname = ref("")

</script>

<style scoped>
.cen {
  width: 1400px;
}
.ac {
  width: 800px;
}
.el-avatar {
  width: 100px;
  height: 100px;
}
.name {
  font-size: 40px;
}
.data {
  float: left;
  margin-top: 20px;
  padding: 20px;
  width: 800px;
  height: 400px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}
.time {
  margin-left: 100px;
  float: left;
}
.timeCard {
  width: 300px;
}
</style>